<template>
  <ul class="prolist">
  	<li class="proItem" @click="goDetail(item.id)" v-for="item of prolist" :key="item.id"> 
    	<div class="proInfo">
        {{ item.title }}
      </div>
	      <div class="wrapper">
	      	<div class="proImg">
	       		<img :src="item.logo" alt="">
	        </div>
	        <div class="proImg">
	        	<img :src="item.logo" alt="">
	        </div>
	        <div class="proImg">
	        	<img :src="item.logo" alt="">
	        </div>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  props: ['prolist'],
  methods: {
  	goDetail (id) {
  		this.$router.push({
  			name: 'detail' ,
  			params: { id }
  		})
  	}
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.prolist {
  @include rect(100%, auto);
  @include flexbox();
  @include flex-direction(column);
  @include align-items();
  .proItem {
    @include rect(96%, 1.5rem);
    @include flexbox();
    @include flex-direction(column);
    justify-content: flex-end;
    .wrapper{
    	  @include rect(100%,1rem);
    	  @include flexbox();
    	  justify-content:space-between;
        @include align-items(); 
    .proImg {
      @include rect(0.9rem, 0.9rem);
      @include flexbox();
      img {
        @include rect(0.9rem, 0.9rem);
      }
    }	  
    }
    
    .proInfo {
    }
  }
}
</style>
